import React from 'react';
import { Form } from 'antd';
import Area from './Area';
import CheckboxGroup from '../controls/CheckboxGroup';
import { useManagers } from '../hooks';

/**
 * 选择客响经理
 */
function ManagerArea(props) {
    const { name, onSuccess } = props;

    const { setFieldValue } = Form.useFormInstance();

    const managers = useManagers({
        onSuccess(data) {
            setFieldValue(name, data);
            onSuccess(data);
        },
    });

    return (
        <Area title="选择客响经理" required>
            <Form.Item name={name} rules={[{ required: true, message: '必选' }]}>
                <CheckboxGroup
                    labelInValue
                    labelKey="customerName"
                    valueKey="customerId"
                    loading={managers.loading}
                    options={managers.data}
                />
            </Form.Item>
        </Area>
    );
}

export default ManagerArea;
